define(function() {

    const  { html, Component, render } = preact;

    let requestAnimFrame  = window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
            return window.setTimeout(callback, 1000 / 60);
        };

    let cancelAnimFrame = window.cancelAnimationFrame || 
                    window.webkitCancelAnimationFrame || 
                    window.mozCancelAnimationFrame || 
                    window.oCancelAnimationFrame || 
                    window.msCancelAnimationFrame || 
                    function (id) { window.clearTimeout(id) }


    // 数字动画类
    class Anim {
        constructor(options){
            this.options = options;
            this.aIndex = 0;
        }
        start(){

            this.frame();

            setTimeout(() => {
                this.clear();
            }, this.options.time);

        }
        frame(){
            this.update(this.aIndex);
            this.aIndex = this.aIndex+1;

            this.tid = requestAnimFrame(()=>{
                this.frame();
            });
        }
        update(index){
            let randoms = this.options.randoms;
            let i = this.options.index;
            index = parseInt(index/3)%randoms.length;

            let values = this.host.state.values || [];
            values[i] = randoms[index];
            this.host.setState({
                values
            });
        }
        clear(){
            cancelAnimFrame(this.tid)
            let i = this.options.index;
            let values = this.host.state.values;
            values[i] = this.options.value;
            this.host.setState({
                values
            });
        }
    }



    
    class Score extends Component {
        constructor(props){
            super(props);

            this.state = {
                values : []
            }

            this.anims = [];
        }

        componentDidMount(){
            this.change();
        }

        componentWillUnmount(){
            if(this.anims && this.anims.length){
                this.anims.forEach(a=>a.clear())
            }
        }

        //如果value值更新，更新动画
        componentWillReceiveProps(nextProps){
            // console.log(nextProps.value, this.props.value);
            if(this.props.value != nextProps.value){
                this.change(nextProps.value);
            }
        }

        change(propsValue){
            let value = '' + (propsValue || this.props.value || 0);
            let values = [];
            let zeros = [];
            let randoms = [1,2,3,4,5,6,7,8,9,0];
            let time = 700;            //随机时间
            let letterDelayTime = 250; //每个字符延迟间隔，右到左
            this.anims.forEach(a=>a.clear())
            this.anims = [];

            for (let index = 0; index < value.length; index++) {
                values[index] = value[index];
                zeros[index] = 0;

                this.anims[index] = new Anim({
                    index,
                    randoms: shuffle(randoms), //洗牌shuffle lib/util.js
                    value: value[index],
                    time: time + (value.length - 1 - index) * letterDelayTime
                });
                this.anims[index].host = this;//当前组件实例传入动画对象
            }

            this.anims.forEach(a=>a.start())

            this.setState({
                values: zeros
            });

        }
        render(props, state){

            return html`<div>
                ${state.values.map((v,i)=>html`<span class="n-${i}">${v}</span>`)}
            </div>`
        }

    }


    return Score;
});